<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>志愿者注册</title>
   <include file="public@mobile_head">
</head>
<body class="page-register">
<!--头部-->
<div class="head zcdlHead">    
    <div class="head-title">
    <a href="javascript:;" class="backTop" onclick="javascript:history.back(-1);">
        <i class="layui-icon layui-icon-left"></i>
        </a>志愿者注册</div>
</div>
<div class="zctj registere">
    <div class="content registereForm">
        <!--<form class="layui-form" action="{:url('mobile/User/doRegister')}" method="post">-->
        <form class="layui-form" id="form">

            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                <div class="layui-input-block">
                    <input type="text" name="username"   id="js-mobile-input" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input zcdlInput">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                <div class="layui-input-block">
                    <input type="text" name="code" id="js-code" required  lay-verify="required" placeholder="请输入手机验证码" style="width: 68%" autocomplete="off" class="layui-input yzmInput zcdlInput">
                    <a class="btn-success js-get-mobile-code" style="width: 30%;" data-wait-msg="[second]秒后才能再次获取" id="code" data-mobile-input="#js-mobile-input" data-url="{:url('user/VerificationCode/send')}" daty-type="register"data-init-second-left="60">验证码</a>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                <div class="layui-input-block">
                    <input type="password" name="password" id="js-passwd" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input zcdlInput">
                </div>
            </div>

            <div class="nextBtn">
                <button type="button" class="layui-btn btn-primary btn-block" style="width: 331px">提交注册</button>
            </div>
            <div class="yzc-link">
                <a href="{:url('mobile/User/login')}">
                    已注册去登录
                </a>
            </div>

        </form>
    </div>
</div>
<!--<div class="btn">-->
    <!--<a href=""></a>-->
    <!--<button type="button" class="layui-btn">下一步</button>-->
<!--</div>-->
</body>
<script type="text/javascript" src="/html/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/html/layui/layui.js"></script>
<script>
    $(function() {

        var code = true; //表示验证码已经发送
        $('#code').click(function() {
            var $val = $('#js-mobile-input').val(); //
            var reg = /^1\d{10}$/; //电话号码验证规则
            var that = $(this);
            if($val.length == 0 || !reg.test($val)) { //如果电话号码为空或者电话号码输入不正确
                layer.msg("手机号不能为空！"); //提示信息
                return false;
            }
            if(reg.test($val)) { //如果电话号码输入正确，则验证码发送成功，倒计时开始
                console.log($val)
                console.log(code)
                if (code) {
                    $.ajax({
                        url: "/portal/Phonecode/send",
                        data: {mobile: $val},
                        success: function (data) {
                            //console.log(data)
                            var timer = 60;
                            layer.msg("验证码发送成功");
                            code = false;//表示当验证码发送完成后，发送按钮不可点击
                            var n = setInterval(function () {
                                timer--;
                                that.text(timer + 's后重新发');
                                if (timer == 0) {
                                    clearInterval(n);
                                    code = true;//当倒计时为0时，即可重新发送验证码
                                    that.text('重新发送')
                                }
                            }, 1000)
                        }

                    })
                }
            }
        });
    })
    //Demo
    layui.use(['form','laydate','upload'], function(){
        var $ = layui.jquery
            ,form = layui.form
            ,laydate = layui.laydate
            ,upload = layui.upload;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });

        $('.nextBtn').off("click").on("click",function(e){
            e.preventDefault();
            var _data = {};
            var _mobile = $.trim($('#js-mobile-input').val()); //
            var reg = /^1\d{10}$/; //电话号码验证规则
            if(_mobile.length == 0 || !reg.test(_mobile)) { //如果电话号码为空或者电话号码输入不正确
                return layer.msg("手机号不能为空！"); //提示信息
            }
            var _code = $.trim($('#js-code').val());
            if(!_code){return layer.msg('请输入验证码~');}
            var _pwd = $.trim($('#js-passwd').val());
            if(!_pwd){return layer.msg('请输入密码~');}

            _data={
                username:_mobile,
                code:_code,
                password:_pwd,
            }
            ajax_register(_data);

        });
        function ajax_register(_data){
            $.ajax({
                url: "doRegister",
                method:'POST',
                data: _data,
                success: function (rsp) {
                    console.log(rsp);
                    layer.msg(rsp.msg);
                    if(rsp.code==0) return;
                    window.location.href = rsp.url

                }
            })
        }
    });
</script>
</html>